<script setup lang="ts">
import { graphic } from 'echarts'

import useEcharts, { type EChartsOption } from '~/composables/chart'

import BlockHead from './block-head.vue'
import defaults from './default-chart-option'

defineOptions({
  name: 'ItemFive',
})

const props = defineProps<{
  data1: { name: string, value: string | number }[]
  data2: { name: string, value: string | number }[]
}>()

const { chartRef: chartRef1, setOption: setOption1 } = useEcharts()
const { chartRef: chartRef2, setOption: setOption2 } = useEcharts()

const option1 = computed<EChartsOption>(() => {
  return {
    tooltip: { ...defaults.tooltip, axisPointer: { type: 'cross' } },
    grid: { ...defaults.grid, top: 30 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.data1.map(item => item.name),
      axisLabel: {
        color: 'rgba(255,255,255,0.8)',
      },
      axisLine: { show: false },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(169, 208, 239, 0.8)',
      },
      axisLine: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(115, 162, 255, 0.2)',
        },
      },
    },
    series: [
      {
        type: 'line',
        data: props.data1.map(v => v.value),
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 5,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(23, 230, 255, 1)' },
            { offset: 1, color: 'rgba(46, 137, 250, 1)' },
          ]),
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(23, 66, 123, 1)' },
            { offset: 0.2, color: 'rgba(23, 66, 123, 1)' },
            { offset: 0.6, color: 'rgba(23, 66, 123, 0.8)' },
            { offset: 1, color: 'rgba(23, 66, 123, 0)' },
          ]),
        },
      },
    ],
  }
})
const option2 = computed<EChartsOption>(() => {
  return {
    tooltip: { ...defaults.tooltip, axisPointer: { type: 'cross' } },
    grid: { ...defaults.grid, top: 30 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.data2.map(item => item.name),
      axisLabel: {
        color: 'rgba(255,255,255,0.8)',
      },
      axisLine: { show: false },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(169, 208, 239, 0.8)',
      },
      axisLine: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(115, 162, 255, 0.2)',
        },
      },
    },
    series: [
      {
        type: 'line',
        data: props.data2.map(v => v.value),
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 5,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(166, 239, 174, 1)' },
            { offset: 1, color: 'rgba(60, 178, 84, 1)' },
          ]),
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(60, 178, 84, 1)' },
            { offset: 0.2, color: 'rgba(60, 178, 84, 1)' },
            { offset: 0.6, color: 'rgba(60, 178, 84, 0.8)' },
            { offset: 1, color: 'rgba(60, 178, 84, 0)' },
          ]),
        },
      },
    ],
  }
})

onMounted(() => {
  setOption1(option1.value)
  setOption2(option2.value)
})

watch([chartRef1, option1], () => {
  setOption1(option1.value)
})
watch([chartRef2, option2], () => {
  setOption2(option2.value)
})
</script>

<template>
  <div class="w-full flex flex-auto flex-col">
    <BlockHead title="温度振动频率趋势分析" />
    <div class="block-body h-80 w-full flex-auto items-center">
      <div class="h-full w-full flex flex-col p-3">
        <div class="max-h-1/2 flex flex-1/2 items-center">
          <div class="tag-item flex-shrink-0">
            温度
          </div>
          <div v-if="data1 && data1.length > 0" class="h-full flex-auto">
            <div ref="chartRef1" style="width: 100%; height: 100%;" />
          </div>
          <div v-else class="ml-4 flex-auto text-center text-sm opacity-50">
            暂无数据
          </div>
        </div>
        <div class="max-h-1/2 flex flex-1/2 items-center">
          <div class="tag-item flex-shrink-0">
            振动频率
          </div>
          <div v-if="data2 && data2.length > 0" class="h-full flex-auto">
            <div ref="chartRef2" style="width: 100%; height: 100%;" />
          </div>
          <div v-else class="ml-4 flex-auto text-center text-sm opacity-50">
            暂无数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tag-item {
  letter-spacing: 2px;
  @apply rounded-12 bg-[rgba(46,137,250,0.15)] px-2 text-center h-74/100 opacity-80 text-sm write-vertical-left whitespace-nowrap shadow shadow-cyan shadow-inset;
}
</style>
